<template>
	<view class="cp-top">
		<view class="cp-top-tit flex_fsc">
			<text>技能评测</text>
			<text class="lab">开球</text>
		</view>
		<view class="jn-list flex_fsc">
			<view class="jn-list-con" :class="{ select: isActive == index}" v-for="(element, index) in list" :key="index" >{{element.massage}}</view>
		</view>
	</view>
	<bottom-box :buts="buts" @change="butChange"></bottom-box>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { ref, reactive, getCurrentInstance } from 'vue';
	const { proxy: that } = getCurrentInstance();
	const isActive = 0;
	const list = [{
		massage:'1号木'
	},{
		massage:'3-7号球道木'
	},{
		massage:'3-7号球道木'
	},{
		massage:'3-7号球道木'
	},{
		massage:'3-7号球道木'
	},{
		massage:'3-7号球道木'
	}]
	const buts = [{
		label: '下一项',
		bgColor: 'uni-color-main-bg'
	}]
	
	function butChange(e) {
		if (e) {} else {
			uni.navigateTo({
				url: '/pages/player/evaluation/evaluation-base/evaluation-nextDetail'
			})
		}
	}
</script>

<style lang="scss">
	.cp-top{
		padding:0 40rpx;
	}
	.cp-top-tit{
		font-size: 36rpx;
		font-weight: 500;
		color: $uni-text-color;
		line-height: 50rpx;
		padding-top: 60rpx;
	}
	.cp-top-tit .lab{
		background: $uni-orange;
		border-radius: 8rpx;
		display: inline-block;
		margin-left: 16rpx;
		color: $uni-white;
		font-size: 24rpx;
		line-height: 34rpx;
		padding: 2rpx 12rpx;
	}
	.jn-list{
		flex-wrap: wrap;
		margin: 60rpx auto;
	}
	.jn-list-con{
		width: 280rpx;
		height: 124rpx;
		background: #F3F5F5;
		border-radius: 24rpx;
		text-align: center;
		line-height: 124rpx;
		margin: 20rpx;
		border: 2rpx solid $uni-white;
	}
	.select{
		color: $uni-text-color-main;
		background: #DCF0EB;
		border: 2rpx solid $uni-text-color-main;
	}
</style>
